<template>
    <el-container style="width: 80%;margin-left: 10%;max-height: 970px"  >
        <el-header style="margin-top: 4%">
            <el-steps :active="active" finish-status="success" style="margin-top: 15px">
                <el-step title="选择模型" icon="el-icon-edit"></el-step>
                <el-step title="填写模型参数" icon="el-icon-edit"></el-step>
                <el-step title="配置资源参数" icon="el-icon-edit"></el-step>
            </el-steps>
        </el-header>
        <el-main style="height: 96%;overflow: hidden;max-height: 820px" v-loading="modelStart" >
            <el-container style="height: 100%;overflow: auto;max-height: 780px">
                <el-main v-show="step1" style="height: 100%">
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="共享模型" name="first">
                            <el-container style="height: 100%">
                                <el-main style="padding: 0 20px;" :class="fitContent">
                                    <el-col :xs="24" :sm="12" :md="8" :lg="8" v-for="(card, index) in cardsData"
                                            :key="index"
                                            style="">
                                        <modelCard :card="card" v-on:next="next" style="margin: 20px 19.5%;width:60%"></modelCard>
                                    </el-col>
                                </el-main>
                                <el-footer style="text-align: center;padding: 0;height: 30px">
                                    <el-pagination
                                            @size-change="handleSizeChange"
                                            @current-change="handleCurrentChange"
                                            :current-page="pageNo"
                                            :page-sizes="[6, 12, 18, 24]"
                                            :page-size="pageSize"
                                            layout="prev, pager, next"
                                            :total=this.totalCount>
                                    </el-pagination>
                                </el-footer>
                            </el-container>
                        </el-tab-pane>
                        <el-tab-pane label="个人模型" name="second">
                            <el-container style="height: 100%">
                                <el-main style="padding: 0 20px;" :class="fitContent">
                                    <el-col :xs="24" :sm="12" :md="8" :lg="8" v-for="(card, index) in cardsDataPersonal"
                                            :key="index"
                                            style="">
                                        <modelCard :card="card" v-on:next="next" style="margin: 20px 19.5%;width:60%"></modelCard>
                                    </el-col>
                                </el-main>
                                <el-footer style="text-align: center;padding: 0;height: 30px">
                                    <el-pagination
                                            @size-change="handleSizeChange"
                                            @current-change="handleCurrentChange"
                                            :current-page="pageNo"
                                            :page-sizes="[6, 12, 18, 24]"
                                            :page-size="pageSize"
                                            layout="prev, pager, next"
                                            :total=this.totalCount>
                                    </el-pagination>
                                </el-footer>
                            </el-container>
                        </el-tab-pane>
                    </el-tabs>
                </el-main>
                <el-main v-show="step2" style="height: 98%">
                    <modelForm ref="modelForm" :formData="formData" style="margin-left: 18%;width: 70%"></modelForm>
                </el-main>
                <el-main v-show="step3" style="height:500px;overflow: hidden">
                    <el-form :model="settingForm" :rules="settingRule" ref="settingForm"
                             style="margin: 8% 20% 4%;min-height: 300px;" id="settingForm">
                        <el-form-item label="driver-memory:" prop="driver" style="margin-top: 22px;margin-left: 10%">
                            <el-input-number v-model="settingForm.driver"
                                             style="margin-left: 4.5%"></el-input-number>
                            <span style="color: #606266;margin-left: 1%">g</span>
                        </el-form-item>
                        <el-form-item label="executor-memory:" prop="executor" style="margin-left: 10%">
                            <el-input-number v-model="settingForm.executor"style="margin-left: 3%" ></el-input-number>
                            <span style="color: #606266;margin-left: 1%">g</span>
                        </el-form-item>
                        <el-form-item label="num-executor:" prop="num" style="margin-left: 10%">
                            <el-input-number v-model="settingForm.num"
                                             style="margin-left: 4.5%"></el-input-number>
                        </el-form-item>
                        <el-form-item label="executor-cores:" prop="cores" style="margin-left: 10%">
                            <el-input-number v-model="settingForm.cores"
                                             style="margin-left: 4.5%"></el-input-number>
                        </el-form-item>
                    </el-form>
                </el-main>
            </el-container>
        </el-main>
        <el-footer style="height: 50px;margin-top: 10px">
            <div style="float:right">
                <el-button v-if="this.active===1||this.active===2" @click="previous">上一步</el-button>
                <el-button v-if="this.active===0||this.active===1" @click="next">下一步</el-button>
                <el-button v-if="this.active===2" @click="totalConfirm">确定</el-button>
                <el-button v-if="this.active===1" @click="cancel">重置</el-button>
            </div>
        </el-footer>
    </el-container>
</template>

<script>
    import modelForm from '../space/modelForm'
    import modelCard from '../space/modelCard'


    export default {
        name: "newAnalysis",
        components: {
            modelForm,
            modelCard,
        },
        data() {
            return {
                activeName: 'second',
                active: 0,
                step1: true,
                step2: false,
                step3: false,
                totalCount: 0,
                pageSize: 6,
                pageNo: 1,
                cardsData: {},
                cardsDataPersonal:{},
                formData: null,
                modelFormData: {},
                settingForm: {
                    driver: 4,
                    executor: 4,
                    num: 4,
                    cores: 2
                },
                settingRule: {
                    driver: [{required: true, message: '请选择内存', trigger: 'blur'}],
                    executor: [{required: true, message: '请选择内存', trigger: 'blur'}],
                    num: [{required: true, message: '请选择数量', trigger: 'blur'}],
                    cores: [{required: true, message: '请选择核', trigger: 'blur'}]
                },
                modelId: '',
                modelStart:false
            };
        },
        computed: {
            fitContent() {
                if (window.screen.height >= 1000) {
                    return 'longNewAna'
                } else {
                    return 'shortNewAna'
                }
            }
        },
        watch: {
            pageSize() {
                this.getModel();
            },
            pageNo() {
                this.getModel();
            },
            active(val) {
                console.log(val)
            }
        },
        methods: {
            cancel() {
                this.$refs.modelForm.reset();
            },
            refresh() {
                this.cardsData = null;
                this.getModel();
            },
            handleSizeChange(val) {
                this.pageSize = val;
            },
            handleCurrentChange(val) {
                this.pageNo = val;
            },
            getModel() {
                let that = this;
                let url = this.$URL.parallelListUrl + this.pageSize + '&pageNo=' + this.pageNo;
                // let url = 'http://192.168.1.5:9000/dbfg/parallel/get?pageSize=' + this.pageSize + '&pageNo=' + this.pageNo;
                this.$axios.get(url).then(res => {
                    if (res.code === 200) {
                        that.cardsData = res.body.result;
                        for (let card of that.cardsData) {
                            card.deleteShow = false;
                        }
                        that.totalCount = res.body.totalCount;
                    } else {
                        that.$message({
                            type: 'warning',
                            message: res.message
                        })
                    }
                }).catch(function (error) {
                    console.log(error);
                    that.$message.error('共享模型获取失败！')
                })

                let urlPersonal = this.$URL.personalParallelListUrl + this.pageSize + '&pageNo=' + this.pageNo;
                // let url = 'http://192.168.1.5:9000/dbfg/parallel/get?pageSize=' + this.pageSize + '&pageNo=' + this.pageNo;
                this.$axios.get(urlPersonal).then(res => {
                    if (res.code === 200) {
                        that.cardsDataPersonal = res.body.result;
                        for (let card of that.cardsDataPersonal) {
                            card.deleteShow = false;
                        }
                        that.totalCount = res.body.totalCount;
                    } else {
                        that.$message({
                            type: 'warning',
                            message: res.message
                        })
                    }
                }).catch(function (error) {
                    console.log(error);
                    that.$message.error('用户个人模型获取失败！')
                })

            },
            previous() {
                if (this.active === 1) {
                    this.active = 0;
                    this.step1 = true;
                    this.step2 = false;
                    this.step3 = false;
                } else if (this.active === 2) {
                    this.active = 1;
                    this.step1 = false;
                    this.step2 = true;
                    this.step3 = false;
                }
            },
            next(id) {
                let that = this;
                if (this.active === 0) {
                    if(typeof (id) == "string"){
                        this.active++;
                        this.step1 = false;
                        this.step2 = true;
                        this.step3 = false;
                        this.modelId = id;
                        //获取表单信息
                        let url = this.$URL.parallelDetailUrl + id;
                        // let url = 'http://192.168.1.5:9000/dbfg/parallel/get/' + id;
                        this.$axios.get(url).then(res => {
                            if (res.code === 200) {
                                //先在前面加一行实现模型任务名称的填写
                                let createValue = {
                                    "datatype": "String", "default": "task", "description": "任务名称",
                                    "name": "任务名称", "tag": "-taskId"
                                };
                                let value = JSON.parse(res.body.parameters);
                                value.unshift(createValue);
                                that.formData = value;
                            } else {
                                that.$message({
                                    type: 'warning',
                                    message: res.message
                                })
                            }
                        }).catch(function (error) {
                            console.log(error);
                            that.$message.error('模型信息获取失败！')
                        })
                    }else{
                        this.$message.error("请选择模型!")
                    }
                } else if (this.active === 1) {
                    //提交表单时的校验
                    this.$refs.modelForm.confirm();
                    if (this.modelFormData.pass) {
                        this.active++;
                        this.step1 = false;
                        this.step2 = false;
                        this.step3 = true;
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '请检查模型参数！'
                        })
                    }
                }
            },
            //提交模型
            totalConfirm() {
                debugger
                let that = this;
                this.$refs['settingForm'].validate((valid) => {
                    if (valid) {
                        that.modelStart = true;
                        let resourceS = [];
                        for (let key of Object.keys(this.settingForm)) {
                            if (key === "driver" || key === "executor") {
                                resourceS.push(this.settingForm[key] + "" + "g");
                            } else {
                                resourceS.push(this.settingForm[key] + "");
                            }
                        }
                        let executor = resourceS[1];
                        resourceS[1] = resourceS[2];
                        resourceS[2] = executor;
                        let totalParam = this.modelFormData.param;
                        totalParam.setting = resourceS;
                        //ToDo 修改url并测试
                        // let url = this.$URL.parallelRunUrl + this.modelId;
                        let url = "http://121.89.211.142:9500/dbfg/parallel/use/"+ this.modelId;
                        // let url = 'http://192.168.1.5:9000/dbfg/parallel/use/' + this.modelId;
                        this.$axios.post1(url, totalParam).then(res => {
                            if (res.code === 200) {
                                that.$message({
                                    type: 'success',
                                    message: '模型配置成功，已前往任务管理中查看运行进度'
                                });
                                that.modelStart = false;
                                that.$router.push({
                                    name: 'missionManager'
                                })
                            }
                        }).catch(function (error) {
                            that.modelStart = false;
                            console.log(error);
                            that.$message.error('模型提交失败！')
                        });
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '请正确配置资源参数！'
                        });
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        },
        created() {
            let that = this;
            this.getModel();
            this.$Bus.$emit('modelSelect', true);
            this.$Bus.$on('modelForm', res => {
                that.modelFormData = res;
            });
        }
    };

</script>
<style>

    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .el-col-8 {
        width: 15%;
    }

    .el-tabs__header {
        margin: 0 0;
    }

    #settingForm .el-input-number{
        width: 40% !important;
    }
    .longNewAna {
        min-height: 690px;
    }

    .shortNewAna {
        min-height: 540px;
    }

</style>